<template>
  <basic-container>
    <div class="container-body">
      <el-form :inline="true" :model="query" class="demo-form-inline">
        <el-row>
          <el-form-item label="项目编号:">
            <el-input v-model="query.projectCode" clearable placeholder="项目编号" size="small"></el-input>
          </el-form-item>
          <el-form-item label="项目名称:" label-width="124px">
            <el-input v-model="query.projectName" clearable placeholder="项目名称"></el-input>
          </el-form-item>
          <el-form-item label="审批状态:">
            <el-select v-model="query.auditStatus" clearable>
              <el-option v-for="dict in dict.type.audit_status" :key="dict.value" :label="dict.label" :value="parseInt(dict.value)"></el-option>
            </el-select>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="建设单位:">
            <el-input v-model="query.auditedCompanyName" clearable placeholder="建设单位" size="small"></el-input>
          </el-form-item>
          <el-form-item label="建设单位联系人:" label-width="124px">
            <el-input v-model="query.auditedUserNames" clearable placeholder="建设单位联系人" size="small"></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item>
            <el-button size="small" type="primary" icon="el-icon-search" @click="onSearch" :loading="loading">搜索
            </el-button>
            <el-button size="small" icon="el-icon-delete" @click="searchReset" :loading="loading">清空</el-button>
          </el-form-item>
        </el-row>
      </el-form>
<!--      <div class="btn-operate">
        <el-button icon="el-icon-plus" size="small" type="primary" @click="addOrUpdateHandle()">
          编辑实施方案
        </el-button>
      </div>-->
      <el-table v-loading="loading" :data="data" border
                header-row-class-name="container-table-header"
                highlight-current-row @cell-click="handleCellClick"
                row-key="id" size="small" stripe style="width: 100%;margin-bottom: 20px;">
        <el-table-column label="项目编号" prop="projectCode" width="140">
        </el-table-column>
        <el-table-column label="项目名称" prop="projectName" width="270">
          <template v-slot="scope">
            <span :style="{ color: scope.row.projectProgress === 7 ? '#f16262' : '' }">
              {{ scope.row.projectName }}
              <template v-if="scope.row.projectProgress === 7">
                <div style="display: inline-block">【已终止】</div>
              </template>
            </span>
          </template>
        </el-table-column>
        <el-table-column label="建设单位" prop="auditedCompanyName">
        </el-table-column>
        <el-table-column label="建设单位联系人" prop="auditedCompanyUserName">
        </el-table-column>
        <el-table-column label="操作" width="230">
          <template slot-scope="scope">
            <el-button v-if="permissions.prepare_apply_get" icon="el-icon-view" size="small" type="text" @click="showViewBox(scope.row)">查看</el-button>
            <el-button v-if="permissions.prepare_apply_add && (scope.row.auditStatus === 0 || scope.row.auditStatus === 2)" icon="el-icon-edit" size="small" type="text" @click="addOrUpdateHandle(scope.row)">编辑</el-button>
            <el-button v-if="scope.row.auditStatus > 0" type="text" size="small" icon="el-icon-view" @click="showTaskAuditLogDialog(scope.row)">审批日志</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="container-page">
        <el-pagination
          :current-page="page.current"
          :page-size="10"
          :page-sizes="[10, 20, 30, 40, 50, 100]"
          :total="page.total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="sizeChange"
          @current-change="currentChange">
        </el-pagination>
      </div>
    </div>

    <el-dialog top="5vh" :title="formTitle" :visible.sync="viewBox"
               :append-to-body="true" :before-close="closeViewBox" width="1200px">
      <EngineeringApplyAuditView :params="form"></EngineeringApplyAuditView>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeViewBox" size="small" icon="el-icon-close">关闭</el-button>
      </span>
    </el-dialog>

    <table-form ref="addOrUpdate" @cancelDialog="closeApplyDialog"></table-form>
  </basic-container>
</template>

<script>
import {mapGetters} from "vuex";
import {fetchList, getApply} from "@/api/adis/project/projectApply";
import TableForm from "@/components/form/engineeringApplyForm";
import EngineeringApplyAuditView from "@/components/actForm/EngineeringApplyAuditView";

export default {
  components: {
    EngineeringApplyAuditView,
    TableForm,
  },
  dictTypes: ['audit_status'],
  data() {
    return {
      viewBox : false,
      loading: false,
      formTitle: '',
      taskAuditDialog: false,
      taskAuditLogDialog: false,
      processId : '',
      query: {},
      form: {},
      page: {
        size: 10,
        current: 1,
        total: 0
      },
      data: [],
      Authorization: '',
    }
  },
  computed: {
    ...mapGetters(["permissions", "userInfo"])
  },
  created() {
    this.onLoad(this.page);
    this.Authorization = 'Bearer ' + this.$store.getters.access_token
  },
  methods: {
    handleCellClick(row, column) {
      if (row && column.label !== "操作"){
        this.showViewBox(row)
      }
    },

    // 新增 / 查看 / 修改
    addOrUpdateHandle (row, type) {
      const Edit = row ? row : ''
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(Edit, type)
      })
    },
    closeApplyDialog() {
      this.onLoad(this.page);
    },
    onSearch() {
      this.page.current = 1;
      this.onLoad(this.page);
    },
    searchReset() {
      this.query = {};
      this.page.current = 1;
      this.onLoad(this.page);
    },
    onLoad(page, params = {}) {
      this.loading = true;
      this.query.isEngineering = true;
      fetchList(Object.assign(params, this.query, page)).then(res => {
        this.loading = false;
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records;
      }, () => {
        this.loading = false;
      });
    },
    currentChange(current) {
      this.page.current = current;
      this.onLoad(this.page);
    },
    sizeChange(size) {
      this.page.size = size;
      this.onLoad(this.page);
    },
    showViewBox(row) {
      getApply(row.applyId).then(applyResponse => {
        this.form = applyResponse.data.data
        this.formTitle = row.projectName;
        this.viewBox = true;
      })

    },
    closeViewBox() {
      this.viewBox = false;
    },
  },
};
</script>

<style>
.colums {
  display: flex;
  height: calc(100vh - 104px);
}

.colums_left {
  flex: 1 1;
  display: flex;
  flex-direction: column;
}

.colums_left_top {
  font-size: 13px;
  color: #222222;
}

.colums_left_middle {
  flex: 1 1;
  width: calc(100% - 10px);
  background-color: #ffffff;
  position: relative;
}

.middleForm {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  padding: 30px 0;
  overflow: scroll;
}

.middleForm .el-dialog__body {
  padding: 10px 20px 80px;
}

.colums_left_middle .leftIcon {
  position: absolute;
  top: calc((100% - 100px) / 2);
  right: -10px;
  background: #cccccc;
  border-radius: 3px;
  width: 10px;
  height: 100px;
  font-size: 12px;
  color: #ffffff;
  font-weight: bolder;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.colums_left_bot {
  font-size: 14px;
  padding-top: 10px;
  padding: 10px 150px 0;
}

.botIcon {
  color: #409EFF;
  font-weight: bolder;
}

.set-form {
  display: flex;
  padding-bottom: 8px;
}

.set-label1 {
  width: 50px;
  margin-right: 10px;
  text-align: right;
  line-height: 28px;
}

.set-label2 {
  width: 90px;
  margin-right: 10px;
  text-align: right;
  line-height: 28px;
}

.colums_right {
  width: 300px;
  background-color: rgb(250, 250, 250);
}

.colums_right_box {
  padding: 0 10px 10px 10px;
  font-size: 12px;
}

.colums_right_box_title {
  display: flex;
  justify-content: space-between;
  font-weight: bold;
}

.colums_right_box_title .link {
  color: #999999;
  font-weight: normal;
  cursor: pointer;
}

.colums_right_box_title .link:hover {
  color: #409EFF;
}

.colums_right .el-tabs__item {
  font-size: 12px;
  padding: 0 10px;
  color: #555555;
}

.colums_right .el-tabs__item.is-active {
  color: #409EFF !important;
}

.colums_right .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
  padding-left: 10px;
}

.colums_right_box .template {
  padding: 5px 15px;
}

.colums_right_box .template li {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  list-style: inside;
}

.colums_right_box_tips {
  color: #999999;
}

.colums_right_box_typeBox {
  display: flex;
  padding-top: 10px;
}

.colums_right_box_typeBox .typeBox {
  width: 33.3%;
  height: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  box-shadow: 0px 6px 6px 0px rgba(122, 133, 155, 0.2);
  color: #ffffff;
  margin: 0 5px;
}

.colums_right_box_typeBox .type1 {
  background-color: #2085EC;
}

.colums_right_box_typeBox .type2 {
  background-color: #05CE9D;
}

.colums_right_box_typeBox .type3 {
  background-color: #32BEF2;
}

.colums_right_box_end {
  display: flex;
  padding-top: 15px;
}

.colums_right_box_end .endBox {
  flex: 1 1;
  display: flex;
  position: relative;
}

.colums_right_box_end .endBox .arrow1 {
  z-index: 1;
  position: absolute;
  left: -9px;
  top: 3px;
  width: 0;
  height: 0;
  border-right: 10px solid #E2EAF1;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

.colums_right_box_end .endBox .arrow2 {
  z-index: 2;
  position: absolute;
  left: -7px;
  top: 5px;
  width: 0;
  height: 0;
  border-right: 8px solid #ffffff;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}

.colums_right_box_end .endBox .item_content {
  flex: 1 1;
  position: relative;
  background-color: #fff;
  border: 1px solid #E2EAF1;
  padding: 10px 20px;
}

.colums_right_box_end .el-icon-help {
  margin-right: 10px;
  margin-top: 5px;
  font-size: 18px;
  color: #999999;
}
</style>
